@import '@/lib/reset.scss';

.RankingListCon{
    padding-top: 60px;
    @include background-color(#F5F5F5);
    @include rect(100%, 3500px);
    .con-left{
        @include rect(178px, 570px);
        border: 1px solid rgba(153,153,153,0.2);
        margin-left: 116px;
        float: left;
        h1{
            @include rect(144px, 60px);
            border-bottom: 1px solid #ebebeb;
            @include margin(0 auto 12px);
            @include font-size(20px);
        }
        a{
            display: block;
            @include rect(178px, 38px);
            padding: 0 17px;
            @include line-height(38px);
            @include text-color(#000);
            @include font-size(15px);
            &:hover{
                @include text-color(#31c27c);
            }
        }
        .active{
            @include background-color(#31c27c);
            @include text-color(#fff);
            &:hover{
                @include text-color(#fff);
            }
        }
    }
    .con-right{
        float: right;
        @include rect(990px, 3300px);
        margin-right: 116px;
        h1{
            @include rect(100%, 64px);
            margin-bottom: 10px;
            @include font-size(24px);
            @include line-height(64px);
        }
        .con-right-btn{
            @include rect(100%, 38px);
            margin-bottom: 20px;
            p{
                float: left;
                border: 1px solid #c9c9c9;
                height: 36px;
                @include padding(0 23px);
                margin-right: 6px;
                font-size: 15px;
                @include text-color(#222);
                @include line-height(36px);
                cursor: pointer;
            }
            p:first-child{
                @include background-color(#31c27c);
                border: 1px solid #31c27c;
                @include text-color(#fff);
            }
        }
        ul{
            width: 100%;
            li{
                @include rect(100%, 80px);
                position: relative;
                @include line-height(80px);
                @include text-color(#222);
                cursor: pointer;
                p{
                    @include line-height(70px);
                    display: block;
                    position: absolute;
                    left: 30px;
                    @include font-size(24px);
                }
                b{
                    @include font-weight(100);
                    position: absolute;
                    left: 122px;
                    img{
                        @include rect(70px, 70px);
                        margin-right: 20px;
                    }
                }
                em{
                    font-style: normal;
                    position: absolute;
                    left: 698px;
                }
                span{
                    display: block;
                    position: absolute;
                    left: 902px;
                }
            }
            li:nth-child(2){
                p{
                    @include text-color(#ff4222);
                }
            }
            li:nth-child(3){
                p{
                    @include text-color(#ff4222);
                }
            }
            li:nth-child(4){
                p{
                    @include text-color(#ff4222);
                }
            }
            li:first-child{
                @include rect(100%, 50px);
                @include line-height(50px);
                @include text-color(#999);
                cursor: auto;
            }
            li:nth-child(odd){
                @include background-color(#F9F8F9);
            }
        }
    }
}